<!DOCTYPE html>
<html>
	<head>
		<title>商品分类</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 所有的 css & js 资源 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css"> 
		<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
		<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
		<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
		<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
		<script src="../../static/sa.js"></script>
		<script src="../../sa-resources/router.js"></script>
	</head>
	<body>
		<div class="vue-box" style="display: none;" :style="'display: block;'">
			<div class="c-panel">
				<!-- 参数栏 -->
				<div class="c-title">检索参数</div>
				<el-form :inline="true" size="mini" @submit.native.prevent>
					<div class="c-item">
						<label class="c-label">分类名称：</label>
						<el-input size="mini" v-model="p.name"></el-input>
					</div>
					<div class="c-item">
						<label class="c-label">父级分类：</label>
						<el-select
							size="small"
						    v-model="p.parent_id"
						    filterable
						    default-first-option
						    placeholder="请选择">
						    <el-option v-for="item in parentIds" :key="item" :label="item.name" :value="item.category_id"></el-option>
						 </el-select>
					</div>
					<div class="c-item" style="min-width: 0px;">
						<el-button size="mini" type="primary" icon="el-icon-search" @click="f5()">查询</el-button>
						<el-button size="mini" type="primary" icon="el-icon-plus" @click="add()">新增</el-button>
					</div>
				</el-form>
				<!-- 数据列表 -->
				<el-table class="data-table" ref="data-table" :data="dataList" size="small">
					<el-table-column label="ID" prop="category_id"></el-table-column>
					<el-table-column label="分类名称" prop="name"></el-table-column>
					<el-table-column label="分类编号" prop="category_bn"></el-table-column>
					<el-table-column label="图标" prop="icon_url">
						<template slot-scope="s">
							<img :src="s.row.icon_url" style="width: 3em; height: 3em; border-radius: 4px; cursor: pointer;" 
								@click="sa.showImage(s.row.icon_url, '400px', '400px')" />
						</template>
					</el-table-column>
					<el-table-column label="图片" prop="pic_url">
						<template slot-scope="s">
							<img :src="s.row.pic_url" style="width: 3em; height: 3em; border-radius: 4px; cursor: pointer;" 
								@click="sa.showImage(s.row.pic_url, '400px', '400px')" />
						</template>
					</el-table-column>
					<el-table-column label="父级ID" prop="parent_id"></el-table-column>
					<el-table-column label="层级" prop="level"></el-table-column>
					<el-table-column label="路径" prop="path"></el-table-column>
					<el-table-column label="描述" prop="intro"></el-table-column>
					<el-table-column label="系统标识" title="系统资源为系统维持正常运行的重要因素，不可删除">
						<template slot-scope="s">
							{{s.row.is_system == 1 ? '是' : '否'}}
						</template>
					</el-table-column>
					<el-table-column label="状态">
						<template slot-scope="s">
							<el-switch v-model="s.row.is_active" :active-value="1" :inactive-value="0" inactive-color="#ff4949"></el-switch>
							<b style="color: green;" v-if="s.row.is_active == 1">正常</b>
							<b style="color: red;" v-if="s.row.is_active == 0">禁用</b>
						</template>
					</el-table-column>
					<el-table-column label="创建日期">
						<template slot-scope="s">
							{{sa.forDate(s.row.created_at, 2)}}
						</template>
					</el-table-column>
					<el-table-column label="操作" width="220px">
						<template slot-scope="s">
							<el-button type="text" size="mini" @click="update(s.row)">修改</el-button>
							<el-button type="text" size="mini" @click="del(s.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!--  分页  -->
				<div class="page-box">
					<el-pagination background
						layout="total, prev, pager, next, sizes, jumper" 
						:current-page.sync="p.page" 
						:page-size.sync="p.page_size" 
						:total="total" 
						:page-sizes="[20]" 
						@current-change="f5()" 
						@size-change="f5()">
					</el-pagination>
				</div>
			</div>
		</div>
        <script>
			var app = new Vue({
				el: '.vue-box',
				data: {
					sa: sa, 	// 超级对象
					p: {	// 查询参数 
						name: '',
						parent_id: 1,
						page: 1,
						page_size: 20
					},
					dataList: [],	// 数据集合
					total: 0,
					parentIds: []
				},
				methods: {
					// 刷新
					f5: function(){
						sa.ajax(router.getCategoryList, {parent_id: 0, page_size: 99999}, function(res){
							this.parentIds = res.list;
						}.bind(this), {type: 'get'});
						sa.ajax(router.getCategoryList, this.p, function(res){
							this.dataList = res.list;	// 数据
							this.total = res.total;
							sa.f5TableHeight();		// 刷新表格高度 
						}.bind(this), {type:'get'});
					},
					// 修改
					update: function (data) {
						sa.showIframe('修改', 'category-edit.html?id=' + data.category_id, '500px', '600px');
					},
					// 删除
					del: function (data) {
						if(data.is_system == 1){
							return sa.alert('此数据是维持系统正常运行的重要数据<p style="color: red;">已被锁定，不可删除</p>');
						}
						sa.confirm('是否删除，此操作不可撤销', function(){
							sa.ajax2(router.deleteGategory,{id: data.id},function(res){
								sa.arrayDelete(app.dataList, data);
								sa.ok('删除成功');
								sa.f5TableHeight();		// 刷新表格高度 
							});
						})
					},
					// 添加
					add: function () {
						sa.showIframe('新增', 'category-edit.html?id=-1', '500px', '600px');
					},
				},
				created: function(){
					this.f5();
					sa.onInputEnter();		// 监听输入框的回车事件，执行查询  
				}
			});
		</script>
	</body>
</html>